<style>
  body {
    text-align: left ;
    background: #f5f8f9;
    overflow: auto;
    font-size: 1rem;
  }
  .fotter {
    background-color: #000c17;
  }
  .title {
    text-align: left;
    border-left: 1rem solid yellowgreen;
    font-size: 1.5rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
  }
  .content {
    background-color: white;
    padding: 10px 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }
  .content-margin {
    margin-left: 0;
  }
  .content .meinfo {
    font-size: 1rem;
    display: -ms-flexbox;
    display: flex;
    width: 84%;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    /*border: 1px solid #000;*/
  }
  .content .meinfo .tb {
    width: 15rem;
    text-align: left;
    margin-top: 1rem;
  }
  .content .workInfo {
    display: flex;
    align-items: center;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: space-around;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  .content .workInfo .work-Title {
    width: 34rem;
  }
  .content .workInfo .work-content {
    width: 40rem;
  }
  .content .workInfo .work-tab {
    margin-top: 0.5rem;
    font-size: 1rem;
  }
  .content .workInfo .work-p {
    margin-top: 0.5rem;
    font-size: 1rem;
    /* text-indent: 2rem; */
    margin-left: 2rem;
  }

  .vocational .vocational-content {
    display: flex;
    justify-content: space-around;
    width: 86%;
    margin: 0 auto;
    width: 94%;
    margin: 0 0 0 1.5rem;
  }
  .content .line{
    color: orangered;
  }
</style>
<template>
  <div class="layout">
    <Layout>
      <Header class="header">Header</Header>
      <Content class="content">
        <!--<p class="title">个人信息</p>-->
        <Divider  class="line" orientation="left">个人信息</Divider>
        <div class="meinfo content-margin">
          <span class="tb">姓名：冯嘉兴</span>
          <span class="tb">年龄：27岁</span>
          <span class="tb">性别：男</span>
          <span class="tb">籍贯：河北省保定市</span>
          <span class="tb">学历：大专</span>
          <span class="tb">电子邮件：jiaxing.feng@xxyu.top</span>
        </div>
        <Divider class="line" orientation="left">工作经历</Divider>
        <div class="workExperience content-margin">
          <div class="workInfo">
            <h3 class="work-Title">
              2018.03-至今 北京指维科技有限公司 JavaEE软件工程师
            </h3>
            <div class="work-content">
              <h3 class="work-tab">
                工作描述：
              </h3>
              <p class="work-p">
                1、负责公司软件项目的开发和整体进度<br>
                2、指导和带领新人完成项目<br>
                3、完成上级交办的其他事宜<br>
              </p>
            </div>

          </div>
          <div class="workInfo">
            <h3 class="work-Title">
              2015.10-2018.03 北京诺明软件在线有限公司 JavaEE软件工程师
            </h3>
            <div class="work-content">
              <h3 class="work-tab">
                工作描述：
              </h3>
              <p class="work-p">
                1、负责研发公司应用软件的模块设计、开发和交付<br>
                2、负责编码，单元测试<br>
                3、参与新知识的学习和培训<br>
                4、修复程序BUG<br>
                5、完成上级交办的其他事宜<br>
              </p>
            </div>

          </div>
        </div>
        <div class="vocational">
          <Divider class="line" orientation="left">职业技能</Divider>
          <p class="vocational-content">
            1.具备扎实的java语法，良好的编码习惯。<br><br>
            2.理解JAVAWEB技术体系架构，熟练掌握Servlet/JSP技术。<br><br>
            3.熟练使用Spring MVC、Struts2、Spring、Hibernate、MyBatis等框架，理解Spring IOC、AOP。<br> <br>
            4.掌握JavaScript、Ajax、jQuery、EasyUI、Extjs、AngularJS、Ionic、Html5、CSS3等前台开发技术。<br> <br>
            5.掌握SQL Service 、MySql、Oracle等关系型数据库，熟练掌握sql语句。<br>  <br>
            6.熟悉微信公众号开发。<br>   <br>
            7.熟练使用Eclipse/MyEclipse、SVN、Maven项目管理和项目构建工具。<br>     <br>
            8.熟悉应用服务器软件Tomcat等容器配置和部署。<br>   <br>
            9.熟练使用Linux系统管理及服务器配置。<br><br>
          </p>
        </div>

        <Divider dashed />
        <p>Steven Paul Jobs was an nd a co-founder of Apple Inc.</p>
      </Content>
      <Footer class="fotter">Footer</Footer>
    </Layout>
  </div>

</template>

<script>

  import { getData } from '@/api/data'
  import { saveForm } from '../../api/data'

  export default {
    name: 'resume',
    methods: {
      getDataGrid () {
        var _this = this
        getData(this.date).then(res => {
          _this.tableData = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      ajaxClick () {
        const formData = new FormData()
        formData.append('name', this.name)
        formData.append('date', this.date)
        getData(this.date).then(res => {
          this.open(res.data)
        }).catch(err => {
          console.log(err)
        })
      },
      open (pars) {
        this.$Notice.open({
          title: 'Notification title',
          desc: pars
        })
      },
      submitForm () {
        saveForm(this.data).then(res => {
          this.open(res.data)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    data () {
      return {
        name: '',
        data: {},
        tableTitle: [
          {
            title: '一级分类',
            key: 'category1'
          },
          {
            title: '二级分类',
            key: 'category2'
          },
          {
            title: '三级分类',
            key: 'category3'
          }
        ],
        tableData: [
          {
            category1: 1,
            category2: 2,
            category3: 3
          },
          {
            category1: 4,
            category2: 5,
            category3: 6
          },
          {
            category1: 7,
            category2: 8,
            category3: 9
          }
        ]
      }
    }
  }
</script>
